<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <title>全国月度单价回收量</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('报表管理','全国月度单价回收量')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">全国月度单价回收量</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form id="queryForm" th:action="@{flow}" method="post">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input id="selmonth" th:name="month" class="form-control input-sm" type="text" th:value="${month}" readonly="readonly" placeholder="成交开始时间" />
                                    <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>

                            <!--<shiro:hasRole name="sys_nationwide">

                            </shiro:hasRole>-->
                            <input type="hidden" th:name="userId" th:value="${session.authUser.userId}"/>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询
                                </button>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>


                <!--图一-->
                <div id="main" style="width: 800px;height:560px"></div>

                <!--全国单价日回收走向-->
                <div id="main2" style="width: 1200px;height:560px"></div>

            </div>



            <!-- /.box -->
        </div>

    </div>

    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <script>

        $('.form_date').datetimepicker({
            format: 'yyyy-mm',
            autoclose: true,
            todayBtn: true,
            startView: 'year',
            minView:'year',
            maxView:'decade',
            language:  'zh-CN',
            startDate:'2017-06',
            endDate:new Date()
        });

        $(function () {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('main2'));


            // 使用刚指定的配置项和数据显示图表。
            window.onresize = myChart.resize;
            window.onresize = myChart2.resize;


            // 异步加载数据
            getdata();


            $('#btn-query').on("click", function () {
                getdata();
            });

            function getdata(){
                myChart.showLoading();
                myChart2.showLoading();
                $.post( 'flow',
                    $("#queryForm").serialize(),
                    function (datas) {
                        var data = $.parseJSON(datas);
                        var month = $('#selmonth').val();

                        var arencyName = [];
                        var arrayObj = [];
                        $.each(data.avePri, function (index, obj) {
                            arencyName.push(obj.provinceName);
                            arrayObj.push({
                                name: obj.provinceName,
                                type: 'line',
                                data: obj.avePriDay,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            });
                        });

                        myChart.hideLoading();
                        // 填入数据
                        myChart.setOption({
                            title : {
                                text: '全国月度单价回收量',
                                subtext: month,
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            /*<![CDATA[*/
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['1<price≤100','100<price≤300','300<price≤600','600<price≤900','900<price≤1200','1200<price≤1500','1500<price']
                            },

                            series : [
                                {
                                    name: '单价回收量',
                                    type: 'pie',
                                    radius : '60%',
                                    center: ['50%', '60%'],
                                    data:[
                                        {value:data.orderPri[0], name:'1<price≤100'},
                                        {value:data.orderPri[1], name:'100<price≤300'},
                                        {value:data.orderPri[2], name:'300<price≤600'},
                                        {value:data.orderPri[3], name:'600<price≤900'},
                                        {value:data.orderPri[4], name:'900<price≤1200'},
                                        {value:data.orderPri[5], name:'1200<price≤1500'},
                                        {value:data.orderPri[6], name:'1500<price'}
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                            /*]]>*/
                        });
                        myChart2.hideLoading();
                        myChart2.setOption({
                            title: {
                                text: '全国单价日回收走向',
                                subtext: month
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:arencyName
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.day
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: arrayObj
                        });
                    });
            }


        })



    </script>


</div>


</body>
</html>